<template>
    <transition name="fade">
        <suspense v-if="visible">
            <template #default>
                <div>

                    <div style="background-color: #ececec; padding: 20px" class="cardBoxs">
                        <a-row :gutter="25">
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>今日{{ names }}</span>
                                    </template>
                                    <a-statistic title="日同比"
                                        :value="`${(((day_top == 1 && last_day_num != 0) || day_top == 0 ? day_top : (day_top >= 1 ? (last_day_num != 0 ? day_top - 1 : day_top) : 1 - day_top))* 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: day_top != 0 && (day_num != last_day_num) ? (day_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="day_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="day_top < 1 && day_top != 0" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ day_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>昨日{{ names }}</span>
                                    </template>
                                    <a-statistic title="日同比"
                                        :value="`${(((last_day_top == 1 && before_day_num != 0) || last_day_top == 0 ? last_day_top : (last_day_top >= 1 ? (before_day_num != 0 ? last_day_top - 1 : last_day_top) : 1 - last_day_top)) * 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: last_day_top != 0 && (last_day_num != before_day_num) ? (last_day_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="last_day_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="last_day_top < 1 && last_day_top > 0" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ last_day_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>一周{{ names }}</span>
                                    </template>
                                    <a-statistic title="周同比"
                                        :value="`${(((week_top == 1 && last_week_num != 0) || week_top == 0 ? week_top : (week_top >= 1 ? (last_week_num != 0 ? week_top - 1 : week_top) : 1 - week_top)) * 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: week_top != 0 && (week_num != last_week_num) ? (week_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="week_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="week_top < 1 && week_top > 0" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ week_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                        </a-row>
                    </div>
                    <div style="background-color: #ececec; padding: 20px" class="cardBoxs">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>月内{{ names }}</span>
                                    </template>
                                    <a-statistic title="月同比"
                                        :value="`${(((month_top == 1 && last_day_num != 0) || month_top == 0 ? month_top : (month_top >= 1 ? (last_month_num != 0 ? month_top - 1 : month_top) : 1 - month_top)) * 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: month_top != 0 && (month_num != last_month_num) ? (month_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="month_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="month_top > 0 && month_top < 1" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ month_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>上月{{ names }}</span>
                                    </template>
                                    <a-statistic title="月同比"
                                        :value="`${(((last_month_top == 1 && previous_month_num != 0) || last_month_top == 0 ? last_month_top : (last_month_top >= 1 ? (previous_month_num != 0 ? last_month_top - 1 : last_month_top) : 1 - last_month_top)) * 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: last_month_top != 0 && (last_month_num != previous_month_num) ? (last_month_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="last_month_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="last_month_top < 1 && last_month_top > 0" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ last_month_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card :bordered="true">
                                    <template #title>
                                        <span>半年内{{ names }}</span>
                                    </template>
                                    <a-statistic title="半年同比"
                                        :value="`${(((half_year_top == 1 && last_half_year_num != 0) || half_year_top == 0 ? half_year_top : (half_year_top >= 1 ? (last_half_year_num != 0 ? half_year_top - 1 : half_year_top) : 1 - half_year_top)) * 100).toFixed()}%`"
                                        :precision="2"
                                        :value-style="{ color: half_year_top != 0 && (half_year_num != last_half_year_num) ? (half_year_top >= 1 ? '#3f8600' : '#cf1322') : 'black', fontSize: '30px' }"
                                        >
                                        <template #prefix>
                                            <arrow-up-outlined :style="{ fontSize: '30px' }" v-if="half_year_top > 1" />
                                            <arrow-down-outlined :style="{ fontSize: '30px' }"
                                                v-else-if="half_year_top < 1 && half_year_top > 0" />
                                        </template>
                                        <template #suffix>
                                            <div class="numData">
                                                <UserOutlined class="numData" v-if="names == '注册'"></UserOutlined>
                                                <file-done-outlined class="numData" v-else-if="names == '成交'" />
                                                <file-excel-outlined class="numData" v-else-if="names == '退单'" />
                                                {{ half_year_num }}
                                            </div>

                                        </template>
                                        <template #value></template>
                                    </a-statistic>
                                </a-card>
                            </a-col>
                        </a-row>
                    </div>
                    <div ref="chartDom" :style="{height:'500px',width:windowWidth}"></div>



                </div>
            </template>
            <template #fallback>
                <div>加载中...</div>
            </template>
        </suspense>
    </Transition>
</template>

<script setup>
import { ArrowUpOutlined, UserOutlined, ArrowDownOutlined, FileDoneOutlined, FileExcelOutlined } from '@ant-design/icons-vue'
import * as echarts from 'echarts';
import { onMounted, defineProps, ref, reactive,onBeforeUnmount } from 'vue';
import { useUserData } from '../../../stores/userData'
import { statisticsAPI } from '../../../api/home';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

const visible = ref(false);
const router = useRouter();
const store = useUserData();   //获取用户信息
const names = ref('')
let option = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', "八月", "九月", "十月", "十一月", "十二月"],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            data: []
        }
    ],
    responsive: true
});

const res = defineProps(['title'])
let myChart = ref('');
let chartDom = ref('');

const day_num = ref(1);
const last_day_num = ref(1);
const before_day_num = ref(1);
const week_num = ref(1);
const month_num = ref(1);
const last_month_num = ref(1);
const previous_month_num = ref(1);
const last_week_num = ref(1);
const half_year_num = ref(1);
const last_half_year_num = ref(1);

const day_top = ref(day_num.value / last_day_num.value);

const last_day_top = ref(last_day_num.value / before_day_num.value);
const week_top = ref(week_num.value / last_week_num.value);
const month_top = ref(month_num.value / last_month_num.value);
const last_month_top = ref(last_month_num.value / previous_month_num.value);
const half_year_top = ref(half_year_num.value / last_half_year_num.value)

const windowWidth = ref(window.innerWidth +'px')

const handleResize = () => {
    
        setTimeout(()=>{
            windowWidth.value = window.innerWidth +'px'  ; // 窗口大小变化时更新窗口宽度
            option.width = window.innerWidth-300 +'px'
            myChart.value.setOption(option)  //重新渲染
        },20)
};

onMounted(async () => {
    windowWidth.value = window.innerWidth; // 初始获取窗口宽度
    window.addEventListener('resize', handleResize); // 监听窗口大小变化
    
    switch (res.title) {
        case "user":
            names.value = '注册'
            break;
        case "order":
            names.value = '成交'
            break;
        case "refund":
            names.value = '退单'
            break;
        case "agent":
            names.value = '代理'
            break;
        default:
            break;
    }
    let data = `${res.title}|${store.data.token}|${store.data.uuid}|${store.data.phone}`



    let re = await statisticsAPI(data);  //调用api

    if (!re || re.code ==406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    const days = re.data.days[0];

    //获取时间数据
    day_num.value = days.today_count;
    last_day_num.value = days.yesterday_count;
    week_num.value = days.this_week_count;
    last_week_num.value = days.last_week_count;
    month_num.value = days.this_month_count;
    last_month_num.value = days.last_month_count;
    before_day_num.value = days.before_yesterday_count;
    previous_month_num.value = days.previous_month_count;
    half_year_num.value = days.half_year_count;
    last_half_year_num.value = days.previous_half_year_count;

    //计算时间数据对比
    
    day_top.value = last_day_num.value != 0 ? (day_num.value != 0 ? (day_num.value / last_day_num.value) : -(last_day_num.value - 1)) : day_num.value;
    
    last_day_top.value = before_day_num.value != 0 ? (last_day_num.value != 0 ? (last_day_num.value / before_day_num.value) : -(before_day_num.value - 1)) : last_day_num.value;
    week_top.value = (last_week_num.value != 0 ? (week_top.value != 0 ? (week_num.value / last_week_num.value) : -(last_week_num.value - 1)) : week_num.value);
    month_top.value = last_month_num.value != 0 ? (month_num.value != 0 ? (month_num.value / last_month_num.value) : -(last_month_num.value - 1)) : month_num.value;
    last_month_top.value = previous_month_num.value != 0 ? (last_month_num.value != 0 ? (last_month_num.value / previous_month_num.value) : -(previous_month_num.value - 1)) : last_month_num.value;
    half_year_top.value = last_half_year_num.value != 0 ? (half_year_num.value != 0 ? (half_year_num.value / last_half_year_num.value) : -(last_day_num.value - 1)) : half_year_num.value;


    const currentDate = new Date();
    const currentMonth = currentDate.getMonth() + 1; // JavaScript的月份从0开始，所以需要加1
    let y = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

    re.data.month.forEach(element => {//更新每个月的数据

        if (currentMonth == element.month) {
            y[element.month - 1] = { value: element.month_count, itemStyle: { color: "#a90000" } }
        } else {
            y[element.month - 1] = element.month_count;
        }
    });
    visible.value = true;  //加载完成打开页面
    setTimeout(() => {
        myChart.value = echarts.init(chartDom.value);
        option.series[0].data = y;
        option.width = windowWidth.value -300 +'px';
        myChart.value.setOption(option)  //重新渲染
    }, 100)
});

onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize); // 移除窗口大小变化监听
});
</script>


<style scoped src="../../css/home/statData.scss" />
